<template>
  <div class="view-container zi-chan-tong-ji">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>流程监控</span>
        </div>
        <div class="header-form">
<!--          <div class="header-form-item">
            <el-button icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
          </div>-->
<!--          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>-->
          <div class="header-form-item">
            <el-select v-model="searchForm.month" placeholder="月份" @change="fetchData">
              <el-option label="请选择月份" value=""></el-option>
              <el-option v-for="item in monthList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-select v-model="searchForm.year" placeholder="年份" @change="fetchData">
              <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
<!--          <div class="header-form-item">
            <el-select v-model="searchForm.departmentId" placeholder="部门" @change="fetchData">
              <el-option label="请选择部门" value=""></el-option>
              <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>-->
          <!--          <div class="header-form-item">
                      <el-button type="success" icon="el-icon-notebook-2" @click="openEditDialog(false)">报销申请</el-button>
                    </div>-->
          <!--          <div class="header-form-item">
                      <el-select v-model="searchForm.letterState" placeholder="状态" @change="fetchData" clearable>
                        <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="header-form-item">
                      <el-input clearable @input="AntiShake" placeholder="申请人" v-model="searchForm.name"></el-input>
                    </div>-->
        </div>
      </div>
    </header>
    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
      >
        <el-table-column label="申请部门" align="center" >
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.departmentId)">{{s.row.departmentName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="times" label="申请次数" align="center" sortable></el-table-column>
        <el-table-column prop="jinEr" label="费用小计" align="center" sortable></el-table-column>
      </el-table>
    </section>


    <el-dialog title="资产购置详情" :visible.sync="dialog.show">
      <el-table
        ref="table"
        :data="detailTableData"
        border
        stripe
      >
        <el-table-column prop="departmentName" label="申请部室" align="center" width="150" />
        <el-table-column prop="ziChanMingCheng" label="资产名称" align="left" ></el-table-column>
        <el-table-column sortable prop="yuSuanJinE" label="预算金额" width="150" align="center"/>
        <el-table-column sortable prop="zgtime" label="申请时间" :formatter="zgtimeFmt" width="150" align="center"/>
        <el-table-column sortable prop="stateName" label="状态" width="100" align="center">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <footer class="detail-footer">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailPage.total"
          :page-size="detailPage.size"
          @size-change="handleSizeChangeDetail"
          @current-change="handleCurrentChangeDetail"
        />
      </footer>
    </el-dialog>

  </div>
</template>

<script>
  import ziChanAPI from '@/api/ziChan/ziChan'
  import listMixin from '@/mixin/listMixin'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'
  import flowTongJiMixin from '@/mixin/flowTongJi'
  export default {
    name: 'ZiChanTongJi',
    mixins: [flowTongJiMixin,flowManagerListMixin,listMixin],
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
      fetchData(){
        ziChanAPI.tongji(this.searchForm.year,this.searchForm.month).then(res=>{
          console.log(res)
          this.tableData = res.result
          this.page.total = res.total
        })
      },
      zgtimeFmt(row){
        return this._util.format(row.zgtime)
      },
      getDetailList(){
        ziChanAPI.getListByDepartmentId(
          this.curSelected,
          this.searchForm.year,
          this.searchForm.month,
          this.detailPage.index,
          this.detailPage.size
        ).then(res=>{
          this.detailTableData = res.records
          this.detailPage.total = res.total
        })
      }
    }
  }
</script>
<style lang="scss">
  .zi-chan-tong-ji {
    .el-dialog {
      width: 70%;
    }
  }
</style>
<style scoped lang="scss">
  .detail-footer {
    text-align: right;
    margin: 20px 0;
  }
</style>
